import React from "react";
import { Link, NavLink }    from 'react-router-dom';

class NavSide extends React.Component{
    constructor(props){
        super(props);
    }
    changeState(e){//侧边导航class属性的改变实现展开闭合
        let liName = e.target.getAttribute("name");
        let ulName = e.target.getAttribute("value");
        let li = this.refs[`${liName}`];
        let ul = this.refs[ `${ulName}`];
        if($(li).hasClass("active")){
            $(li).removeClass("active")
            $(ul).removeClass("in")
        }else{
            $(li).addClass("active")
            $(ul).addClass("in")
        }

    }
    render(){
        return (
            <div className="navbar-default navbar-side">
                <div className="sidebar-collapse">
                    <ul className="nav">
                        <li>
                            <NavLink exact activeClassName="active-menu" to="/">
                                <i className="fa fa-home"/>
                                <span>首页</span>
                            </NavLink>
                        </li>
                        <li ref="product">
                            <Link to="/product"  name="product" value="productUl" onClick={(e) => this.changeState(e)}>
                                <i className="fa fa-list"/>
                                <span>商品</span>
                                <span className="fa arrow"/>
                            </Link>
                            <ul className="nav nav-second-level collapse " ref="productUl">
                                <li>
                                    <NavLink exact to="/product/index" activeClassName="active-menu">商品列表</NavLink>
                                </li>
                                <li>
                                    <NavLink exact to="/product/save" activeClassName="active-menu">新增商品</NavLink>
                                </li>
                                <li>
                                    <NavLink exact to="/product-category/index" activeClassName="active-menu">品类管理</NavLink>
                                </li>
                                <li>
                                    <NavLink exact to="/product-category/add" activeClassName="active-menu">新增品类</NavLink>
                                </li>
                            </ul>
                        </li>
                        <li ref="order">
                            <Link to="/order" name="order" value="orderUl" onClick={(e) => this.changeState(e)}>
                                <i className="fa fa-check-square-o"/>
                                <span>订单</span>
                                <span className="fa arrow"/>
                            </Link>
                            <ul className="nav nav-second-level collapse" ref="orderUl">
                                <li>
                                    <NavLink exact  to="/order/index" activeClassName="active-menu">订单管理</NavLink>
                                </li>
                                <li>
                                    <NavLink exact to="/order/find" activeClassName="active-menu">查找订单</NavLink>
                                </li>
                            </ul>
                        </li>
                        <li ref="user">
                            <Link to="/user" name="user" value="userUl" onClick={(e) => this.changeState(e)}>
                                <i className="fa fa-user-o"/>
                                <span >用户</span>
                                <span className="fa arrow"/>
                            </Link>
                            <ul className="nav nav-second-level collapse " ref="userUl">
                                <li>
                                    <NavLink to="/user" activeClassName="active-menu">用户管理</NavLink>
                                </li>
                            </ul>
                        </li>
                        <li ref="headLine">
                            <Link to="/headLine" name="headLine" value="headLineUI" onClick={(e)=>this.changeState(e)}>
                                <i className="fa fa-bell-o"/>
                                <span>头条</span>
                                <span className="fa arrow"/>
                            </Link>
                            <ul className="nav nav-second-level collapse" ref="headLineUI">
                                <li>
                                    <NavLink exact to="/headLine/index" activeClassName="active-menu">公告管理</NavLink>
                                </li>
                                <li>
                                    <NavLink exact to="/headLine/add" activeClassName="active-menu">发布公告</NavLink>
                                </li>
                            </ul>
                        </li>
                        <li ref="headLine">
                            <a href="https://tongji.baidu.com/web/welcome/login" target="_blank" alter="0豆浆油条0:7561669Dong">
                                <i className="fa fa-info"/>
                                <span>百度统计</span>
                                <span className="fa arrow"/>
                            </a>
                        </li>
                    </ul>

                </div>

            </div>
        );
    }
}
export default NavSide;